<template>
  <div class="approval-record-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-select
            v-model="unitWorks"
            placeholder="请选择单位工程"
            :loading="unitWorksLoading"
            @change="search()"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in unitWorksSource"
              :key="index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
          <a-button class="back-button" @click="gotoBack()"> 返回 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-container">
      <div class="header" header="审批记录"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
          @toggle-row-expand="toggleExpandChangeEvent"
        >
          <vxe-column type="expand" width="40">
            <template #content="{ row }">
              <div class="subTable-container">
                <vxe-table
                  ref="xTable"
                  min-height="120px"
                  max-height="528px"
                  class="scrollbarStyle"
                  align="center"
                  show-overflow
                  show-header-overflow
                  :data="row.subData"
                  :column-config="{ resizable: true }"
                >
                  <vxe-column field="unitWorks" title="单位工程"> </vxe-column>
                  <vxe-column field="divisionalWorks" title="分部工程">
                  </vxe-column>
                  <vxe-column field="subDivisionalWorks" title="子分部工程">
                  </vxe-column>
                  <vxe-column field="itemWorks" title="分项工程"> </vxe-column>
                  <vxe-column field="subItemWorks" title="子分项工程">
                  </vxe-column>
                  <vxe-column field="procedureItem" title="工序"> </vxe-column>
                </vxe-table>
              </div>
            </template>
          </vxe-column>
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="sysUsername" title="报验人"> </vxe-column>
          <vxe-column field="createTime" title="报验时间"> </vxe-column>
          <vxe-column field="byCount" title="报验个数（个）"> </vxe-column>
          <vxe-column field="updateTime" title="最新审批时间"> </vxe-column>
          <vxe-column title="当前步骤">
            <template #default="{ row }">
              <div :class="[checkStatusClass(row.wfnodename), 'state']">
                {{ row.wfnodename }}
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="120"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  @click="gotoApproval(row)"
                  v-if="row.approve"
                >
                  审批
                </a-button>
                <a-button
                  type="link"
                  @click="gotoDetails(row)"
                  v-if="row.detail"
                >
                  查看
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- 分页 -->
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
//获取登录信息
import { getLoginData } from "@/tools";
import {
  getUnitWorksSelect,
  getSPJLList,
  getBYJLChildList,
} from "@/api/wisdom-beam/quality-app";
export default {
  components: {},
  data() {
    return {
      //标段
      orgCode: undefined,
      //单位工程
      unitWorks: undefined,
      unitWorksSource: [],
      unitWorksLoading: false,
      //列表
      loading: false,
      tableData: [],
      //分页
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    let { orgCode, unitWorks } = this.$route.query;
    this.orgCode = orgCode;
    this.unitWorks = unitWorks;
    this.getUnitWorksList();
    this.getTableData();
  },
  methods: {
    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //展开行
    toggleExpandChangeEvent(event) {
      let { expanded, row, $rowIndex } = event;
      if (expanded) {
        return new Promise((resolve, reject) => {
          getBYJLChildList({ id: row.id })
            .then((res) => {
              let { data } = res;
              this.$set(
                this.tableData[$rowIndex],
                "subData",
                data?.result || []
              );
              resolve();
            })
            .catch((_) => {
              reject();
            });
        });
      }
    },

    blockChange() {
      this.unitWorks = undefined;
      this.getUnitWorksList();
      this.search();
    },

    //查询单位工程【下拉框】
    getUnitWorksList() {
      this.unitWorksLoading = true;
      let { orgCode } = this;
      return new Promise((resolve, reject) => {
        getUnitWorksSelect({ orgCode: orgCode ? orgCode : "" })
          .then((res) => {
            let { data } = res;
            this.unitWorksSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.unitWorksSource = [];
            reject();
          })
          .finally((_) => {
            this.unitWorksLoading = false;
          });
      });
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { orgCode, unitWorks } = this;
      return new Promise((resolve, reject) => {
        getSPJLList({
          page,
          pageSize,
          orgCode: orgCode ? orgCode : "",
          unitWorks: unitWorks ? unitWorks : "",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //审批
    gotoApproval(row) {
      let { orgCode, field1, childIds } = row;
      localStorage.setItem("processesApproveIds", (childIds || []).toString());
      this.$router.push({
        path: "/nebula/wisdom-beam-app/approvalRecord/approve",
        query: {
          orgCode,
          unitWorks: field1,
          id: row.id,
        },
      });
    },

    //查看
    gotoDetails(row) {
      let { orgCode, field1, childIds } = row;
      let ids = [];
      childIds.forEach((item) => {
        ids.push({ id: item });
      });
      sessionStorage.setItem("record_ids", JSON.stringify(ids));
      this.$router.push({
        path: "/nebula/wisdom-beam-app/approvalRecord/details",
        query: {
          orgCode,
          unitWorks: field1,
          backPath: "/nebula/wisdom-beam-app/procedure/approvalRecord",
          id: row.id,
        },
      });
    },

    //返回
    gotoBack() {
      let { orgCode, unitWorks } = this.$route.query;
      this.$router.push({
        path: "/nebula/wisdom-beam-app/procedure/detail",
        query: {
          orgCode,
          unitWorks,
        },
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //检验状态类名
    checkStatusClass(status) {
      switch (status) {
        case "待提交":
          return "default";

        case "已完成":
          return "normal";

        default:
          return "warning";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.approval-record-container {
  box-sizing: border-box;
  height: 100%;
  padding: 0px 0px 10px 10px;
  .flex();
  flex-direction: column;
  .back-button {
    color: var(--primary-color);
    background: #f1f2f7 !important;
    border: none;
    position: absolute;
    right: 20px;
  }
  .table-container {
    margin: 10px 0px 0 0;
    flex: 1;
    .flex();
    flex-direction: column;
    background-color: #fff;
    .header {
      padding: 28px 20px;
      background-color: #fff;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .main {
      flex: 1;
      height: 100%;
      .state {
        &.normal {
          color: #42c596;
        }
        &.warning {
          color: #ff993f;
        }
        &.default {
          color: #0098ff;
        }
      }

      .subTable-container {
        padding: 10px;
        box-sizing: border-box;
      }
    }
    .pager-container {
      flex-shrink: 0;
    }
  }
}
</style>
